import React, {Component} from "react";
import {View, TouchableOpacity, Alert, TextInput, StyleSheet, Dimensions, Modal, Text, Image} from "react-native";
import ClosableModal from "rn-closable-modal";
import {ImageButton} from "../CustomButton";
import Tips from "react-native-root-tips";
import api from "../../api/api";
import {fetchPostRequest} from "../../api/NetworkTool";
import method from "../../api/method";


const {width, height} = Dimensions.get('window');

export default class MineEditPasswordDialog extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isVisible: this.props.show,
            pwd: '',
            confirm_pwd: '',
            secureTextEntry: true,
            new_secureTextEntry: true,
            // avatarSource:this.props.avatar,
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({isVisible: nextProps.show});
    }

    closeModal = () => {
        this.setState({
            isVisible: false
        });
        this.props.closeModal(false);
        // this.props.callbackAvatar(this.state.avatarSource)
    }

    pwd_show() {
        if (this.state.secureTextEntry) {
            return <TouchableOpacity style={{width:30,
                marginRight:5,paddingTop:2,height:25,alignItems:'center',justifyContent:'center'}} onPress={()=>{
                this.setState({secureTextEntry:!this.state.secureTextEntry})
            }}>
                <Image style={{width:12,height:5, marginRight:11}}
                       source={require('../../../res/img/login/login_pwd_unshow.png')}/>
            </TouchableOpacity>
        } else {
            return <TouchableOpacity
                style={{width:30,paddingTop:2,height:25,alignItems:'center',justifyContent:'center'}} onPress={()=>{
                this.setState({secureTextEntry:!this.state.secureTextEntry})
            }}>
                <Image style={{width:12,height:5, marginRight:11}}
                       source={require('../../../res/img/login/login_pwd_show.png')}/>
            </TouchableOpacity>
        }

    }

    con_pwd_show() {
        if (this.state.new_secureTextEntry) {
            return <TouchableOpacity
                style={{width:30,paddingTop:2,height:25,alignItems:'center',justifyContent:'center'}} onPress={()=>{
                this.setState({new_secureTextEntry:!this.state.new_secureTextEntry})
            }}>
                <Image style={{width:12,height:5, marginRight:11}}
                       source={require('../../../res/img/login/login_pwd_unshow.png')}/>
            </TouchableOpacity>
        } else {
            return <TouchableOpacity
                style={{width:30,paddingTop:2,height:25,alignItems:'center',justifyContent:'center'}} onPress={()=>{
                this.setState({new_secureTextEntry:!this.state.new_secureTextEntry})
            }}>
                <Image style={{width:12,height:5, marginRight:11}}
                       source={require('../../../res/img/login/login_pwd_show.png')}/>
            </TouchableOpacity>
        }

    }

    updatePassword() {
        if (this.state.pwd.length <= 6) {
            Tips.showWarn('旧密码输入错误', {position: -1})
            return
        }
        if (this.state.confirm_pwd.length <= 6) {
            Tips.showWarn('新密码输入错误', {position: -1})
            return
        }
        let params = {
            oldPassword: this.state.pwd,
            newPassword: this.state.confirm_pwd,
        }
        fetchPostRequest(api.updatePassword, method.post, params)
            .then(res => {
                Tips.showSuccess('修改成功', {mask: true, position: -1})
                this.setState({
                    isVisible: false
                });
                this.props.closeModal(false);
            })
            .catch(e => {

            })
    }

    _con_pwd_onChangeText(e) {

        this.setState({confirm_pwd: e})
    }

    _oldPwd_onChangeText(e) {

        this.setState({pwd: e})
    }

    _onpwdEndEditing() {

        if (this.state.pwd.length < 6) {
            Tips.showWarn('至少输入6位密码', {position: -1})
        }
    }

    _onpwd1EndEditing() {
        if (this.state.confirm_pwd.length < 6) {
            Tips.showWarn('至少输入6位密码', {position: -1})
        }
    }

    render() {

        return (
            <View style={{flex: 1}}>
                <ClosableModal
                    animationType='fade'
                    show={this.state.isVisible}
                    onClose={this.closeModal}
                    transparent={true}
                >
                    <View style={styles.white_background}>
                        <ImageButton onPress={()=>{this.closeModal()}} style={{marginLeft:15,marginTop:15}} source={require('../../../res/img/dialog/icon_cancel.png')}/>
                        <View style={{justifyContent:'center',alignItems:'center'}}>
                            <Text style={{fontSize:14,fontWeight:'bold',color:'black',marginTop:12}}>修改密码</Text>
                            <View style={styles.text_input_view}>
                                <TextInput onEndEditing={()=>{
                            this._onpwdEndEditing()
                        }} secureTextEntry={this.state.secureTextEntry} onChangeText={(e)=>{this._oldPwd_onChangeText(e)}} style={{padding:0,width:240}}  placeholder='请输入旧密码（不少于6位）' placeholderTextColor='rgba(0,0,0,0.3)' underlineColorAndroid='transparent'/>
                                {this.pwd_show()}
                            </View>
                            <View style={styles.text_input_view}>
                                <TextInput secureTextEntry={this.state.new_secureTextEntry} onEndEditing={()=>{
                            this._onpwd1EndEditing()
                        }} onChangeText={(e)=>{this._con_pwd_onChangeText(e)}} style={{padding:0,width:240}} placeholder='请输入新密码（不少于6位）' placeholderTextColor='rgba(0,0,0,0.3)' underlineColorAndroid='transparent'/>
                                {this.con_pwd_show()}
                            </View>
                            <TouchableOpacity onPress={()=>{
                        this.updatePassword()
                    }} style={{justifyContent:'center',alignItems:'center',backgroundColor:'#DB3843',height:30,width:291,marginTop:15,borderRadius:15,}}>
                                <Text style={{color:'white',fontSize:13}}>确定</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </ClosableModal>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent: 'center',
        alignItems: 'center',
    },

    white_background: {
        width: 331,
        height: 207,
        backgroundColor: 'white',
        borderRadius: 4,
    },
    text_input_view: {
        width: 291,
        height: 30,
        borderRadius: 15,
        borderWidth: 1,
        borderColor: '#DEDEDE',
        backgroundColor: 'white',
        paddingLeft: 20,
        paddingRight: 20,
        marginTop: 15,
        // justifyContent:'center',
        flexDirection: 'row',
    },
});
const photoOptions = {
    title: '请选择',
    quality: 0.8,
    cancelButtonTitle: '取消',
    takePhotoButtonTitle: '拍照',
    chooseFromLibraryButtonTitle: '选择相册',
    allowsEditing: true,
    noData: false,
    storageOptions: {
        skipBackup: true,
        path: 'images'
    }
};